<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #nav-bar {
            position: fixed;
            top: 0px;
            width: 100%;
            line-height: 67px;
            height: 67px;
            background-color: rgba(12, 24, 50, .7);
            font-size: 28px;
            font-family: 'Microsoft Yahel', '微软雅黑';
            font-weight: normal;
            text-align: center;
            color: rgba(255, 255, 255, 1);
        }

        .nav-bar-logo {
            position: absolute;
            width: 137px;
            height: 46px;
            background-image: url("");
            background-repeat: no-repeat;
            top: 10px;
            left: 15px;
        }
    </style>
</head>

<body>

    <div id="map"></div>
    <div id="nav-bar">
        <div class="nav-bar-logo"></div>
        <div class="nav-bar-title">成都市汛期重点关注路段</div>
    </div>
    <!-- <canvas id="canvas"></canvas> -->

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        }); // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        map.setMapStyle({
            style: 'midnight'
        });

        function openInfoWindow(item) {
            let opts = {
                width: 350, // 信息窗口宽度
                height: 60, // 信息窗口高度
                title: '点位名称:    ' + item.name, // 信息窗口标题
                enableMessage: true //设置允许信息窗发送短息
            };
            let content = `经纬度:    ${item.lng},${item.lat}`
            var point = new BMap.Point(item.lng, item.lat);
            var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }

        $.get('data/address-point.csv', function (csvstr) {

            var options = {
                size: 5,
                gradient: {
                    0.25: "rgb(0,0,255)",
                    0.55: "rgb(0,255,0)",
                    0.85: "yellow",
                    1.0: "rgb(255,0,0)"
                },
                max: 20,
                fillStyle: 'blue',
                draw: 'simple',
                methods: { // 一些事件回调函数
                    click: function (item) { // 点击事件，返回对应点击元素的对象值
                        // console.log(item);
                        if (item && item.lat && item.name) {
                            openInfoWindow(item)
                        }
                    },
                    mousemove: function (item) { // 鼠标移动事件，对应鼠标经过的元素对象值
                        // console.log(item);
                    }
                },
            }
            var dataSet = mapv.csv.getDataSet(csvstr);
            let locs = dataSet._data.map(d => {
                let lnglat = d['百度坐标'] && d['百度坐标'].split(',');
                return {
                    lng: lnglat[0],
                    lat: lnglat[1],
                    name: d['名称'],
                }
            })
            dataSet._data = locs;
            dataSet.initGeometry();
            map.setViewport(locs, {
                margins: [10, 10, 10, 10],
                zoomFactor: 1,
            });

            // use mapv show points
            // var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

            //add png markers by yourself

            for (var i = 0; i < locs.length; i++) {
                var myIcon = new BMap.Icon("./images/waterdrop.png", new BMap.Size(30, 40));
                var marker = new BMap.Marker(new BMap.Point(locs[i].lng, locs[i].lat), {
                    icon: myIcon
                });
                var content = locs[i].name;
                map.addOverlay(marker); // 将标注添加到地图中
                addClickHandler(locs[i], marker);
            }

            function addClickHandler(item, marker) {
                marker.addEventListener("click", function (e) {
                    openInfoWindow(item)
                });
            }
        });
    </script>

</body>

</html>